<nz-drawer
  [nzBodyStyle]="{ overflow: 'auto' }"
  [nzClosable]="true"
  [nzVisible]="visible"
  [nzMaskClosable]="false"
  nzPlacement="right"
  nzTitle="添加新列"
  [nzWidth]="500"
  [nzFooter]="footerTpl"
  (nzOnClose)="close()"
>
  <ng-container *nzDrawerContent>
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item *ngFor="let control of listOfControl; let i = index">
        <nz-form-label
          [nzXs]="24"
          [nzSm]="6"
          [nzFor]="control.column"
          nzRequired
        >
          列名 - {{ i + 1 }}
        </nz-form-label>
        <nz-form-control [nzXs]="24" [nzSm]="17" nzErrorTip="请选择列名">
          <div nz-row [nzGutter]="10">
            <div nz-col nzSpan="20">
              <nz-select
                [formControlName]="control.column"
                (ngModelChange)="columnChange($event, i)"
                nzPlaceHolder="选择列名"
                style="width: 100%"
              >
                <nz-option
                  [nzValue]="column.name"
                  [nzLabel]="column.name"
                  *ngFor="let column of columns"
                ></nz-option>
              </nz-select>
            </div>

            <div nz-col nzSpan="2" *ngIf="listOfControl.length > 1 && i >= 1">
              <i
                nz-icon
                nzType="minus-circle-o"
                class="dynamic-delete-button"
                (click)="removeField(control, $event)"
              ></i>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control
          [nzXs]="{ span: 24, offset: 0 }"
          [nzSm]="{ span: 14, offset: 6 }"
        >
          <button
            nz-button
            nzType="dashed"
            class="add-button"
            (click)="addField($event)"
          >
            <i nz-icon nzType="plus"></i>
            新增
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>

  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px" (click)="close()">
        取消
      </button>
      <button nz-button nzType="primary" (click)="submitForm()">添加</button>
    </div>
  </ng-template>
</nz-drawer>
